<template>
  <view>
    <view class="fixed bg-f8ff w-100 h-100 top0 left0 ov-hd-y">
      <itemTitle :item="details"></itemTitle>
      <view>
        <view class="w-100 px-2-6 py-3">
          <view class="w-100 h1 bg-ccc"></view>
        </view>
        <!-- 购票须知 start -->
        <view class="w-100 px-5">
          <view class="font28 font500 t-20">购票须知</view>
          <view class="w-100 pt-3 pb-1 t-8 font24 font400">
            <view class="f-b-c pb-2" v-if="details.stock">
              <text>剩余库存</text>
              <text>{{ details.remainStockNum || "-" }}</text>
            </view>
            <view class="f-b-c pb-2">
              <text>可用次数</text>
              <text>{{ details.availableTimes || "-" }}次</text>
            </view>
            <view class="f-b-c pb-2">
              <text>可用人数</text>
              <text>{{ details.availablePerson || "-" }}人</text>
            </view>
            <view class="f-b-c pb-2">
              <text>单日使用限制</text>
              <text>{{ details.limitations ? "有限制" : "无限制" }}</text>
            </view>
            <view class="f-b-c pb-2">
              <text>退款规则</text>
              <text>{{ details.refundRule || "-" }}</text>
            </view>
            <view class="f-b-c pb-2">
              <text>预约方式</text>
              <text>{{
                details.appointmentMethod ? "须要预约" : "无须预约"
              }}</text>
            </view>
            <view class="f-b-c pb-2">
              <text>有效期限</text>
              <text v-if="details.promissoryNote">{{
                details.endTime || "-"
              }}</text>
              <text v-else>购买后 {{ details.validDate }} 天内有效</text>
            </view>
          </view>
        </view>
        <!-- 购票须知 end -->
        <view class="w-100 px-2-6 pb-3 pt-1">
          <view class="w-100 h1 bg-ccc"></view>
        </view>

        <view class="w-100 px-5">
          <view class="font28 font500 t-20 pb-2">更多</view>
          <richText :rich_text="details.content"></richText>
        </view>
      </view>
      <view class="w-100 h340"></view>
    </view>
    <view class="w-100 fixed bottom0 pb-5 pt-2 left0 z-999 bg-f8ff show0-top">
      <view class="w-100 f-b-c pl-5 pr-2 h80">
        <view class="font28 font500">购买数量</view>
        <view class="f-b-c">
          <view class="w80 py-2 pl-4" @click="set_reduce">
            <view
              class="w40 h40 font40 font600 rounded-circle f-c-c pb-1"
              :class="number <= 1 ? 't-3' : 't-20 bg-theme'"
              >-</view
            >
          </view>
          <view class="px-3 h80 font28 font500 t-20 f-c-c">{{ number }}</view>
          <view class="w80 py-2 pr-4" @click="set_add">
            <view
              class="w40 h40 font40 font600 rounded-circle t-20 f-c-c pb-1 bg-theme"
              >+</view
            >
          </view>
        </view>
      </view>
      <view class="w-100 px-4 pt-3">
        <view class="w-100 f-b-c bg-theme_3 h100 circle120 pl-5">
          <view class="pl-1 font28 font700 t-w">
            <text class="font24 font400 mr-05">合计</text>¥{{ money }}
          </view>
          <view
            v-if="isLogin"
            class="w220 h100 f-c-c bg-theme circle120 font28 font700 t-20"
            @click="get_purchass"
            >立即购买</view
          >
          <view
            v-else
            class="w220 h100 f-c-c bg-theme circle120 font28 font700 t-20"
            @click="set_go_login"
            >去登录</view
          >
        </view>
      </view>
    </view>
    <SignUp ref="signUp" />
  </view>
</template>

<script>
import itemTitle from "../components/title.vue";
import richText from "../components/rich-text.vue";
import isLoginMxin from "../../../common/isLogin.js";
export default {
  mixins: [isLoginMxin],
  components: {
    itemTitle,
    richText,
  },
  data() {
    return {
      details: {},
      money: 0,
      number: 1,
    };
  },
  created() {
    this.money = 0;
    this.details = uni.getStorageSync("details") || {};
    this.money = this.details.price;
  },
  methods: {
    set_reduce() {
      if (this.number <= 1) {
        return;
      } else {
        this.number--;
      }
      this.total();
    },
    set_add() {
      this.number++;
      this.total();
    },
    total() {
      this.money = (this.number * this.details.price).toFixed(2);
    },
    // 购买
    get_purchass() {
      if (!this.$validateStock(this.details, this.number)) {
        return uni.showToast({
          title: "库存不足，请重新选择",
          icon: "none",
        });
      }
      this.details.number = this.number;
      this.details.type = "YEAR_CARD";
      uni.setStorageSync("purchase_type", "YEAR_CARD");
      uni.setStorageSync("createdOrder", this.details);
      uni.navigateTo({
        url: "/pages/purchase/index",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.show0-top {
  border-radius: 34rpx 34rpx 0 0;
}
</style>
